<template>
	<view>
		<u-sticky>
			<view class="header">
				<u-search
					placeholder="请输入分类关键字"
					v-model="keyword"
					shape="square"
					:showAction="false"
					@search="searchlist"
				></u-search>
			</view>
		</u-sticky>
		<block v-for="item in categoryList" style="padding-left: 20rpx">
			<neo-tree-list-item :paramData="item" layer="0" @tapTitle="tapTitle"></neo-tree-list-item>
		</block>
		<u-popup :show="show" @close="show = false" @open="open" mode="center" :round="10" closeable>
			<view class="popup-box">
				<view class="title">
					{{ title }}
				</view>
				<scroll-view scroll-with-animation scroll-y class="right-aside" @scrolltolower="asideScroll">
					<view class="box">
						<view class="box-lable">
							<view class="lable">分类名称:</view>
							<view class="">
								<u--input
									placeholder="请输入分类名称"
									border="surround"
									v-model="form.categoryName"
								></u--input>
							</view>
						</view>
						<view class="box-lable">
							<view class="lable">上级分类:</view>
							<view class="">
								<zxz-uni-data-select
									:localdata="arrLsit"
									dataKey="categoryName"
									dataValue="id"
									v-model="arrValue"
									@change="changeArr"
								/>
							</view>
						</view>
						<view class="box-lable">
							<view class="lable">所属店铺:</view>
							<view class="">
								<zxz-uni-data-select
									:localdata="busList"
									:disabled="disable"
									dataKey="businessName"
									dataValue="businessId"
									v-model="busValue"
									@change="change"
									:multiple="true"
								/>
							</view>
						</view>
						<view class="box-lable">
							<view class="lable">分类头像:</view>
							<view class="">
								<view class="" style="display: flex; flex-wrap: wrap">
									<image
										v-if="form.icon"
										style="width: 100rpx; height: 100rpx; margin-bottom: 20rpx; margin-right: 10rpx"
										:src="form.icon"
										@click="delImage(index)"
									></image>
									<view
										v-else
										@tap="changeImage()"
										style="
											width: 100rpx;
											height: 100rpx;
											background-color: #f5f5f5;
											display: flex;
											justify-content: center;
											align-content: center;
											margin-bottom: 10rpx;
										"
									>
										<u-icon name="photo" size="50"></u-icon>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="" style="display: flex;align-items: center;justify-content: space-between;padding: 0 60rpx ;">
					<u-button v-if="form.id!=0" type="error" :plain="true" text="删除" customStyle="width: 100rpx;margin-right:50rpx" @click="del"></u-button>
					<u-button type="primary" :plain="true" :text="title" customStyle="flex: 1;" @click="confirm"></u-button>
				</view>
			</view>
		</u-popup>

		<view class="footer"><view @click="open()" class="left">添加分类</view></view>
	</view>
</template>

<script>
import {
	searchPlugsGoodCategoryList,
	getBusinessInfo,
	addPlugsGoodCategory,
	updatePlugsGoodCategory,
	searchPlugsGoodCategoryById,
	delPlugsGoodCategory
} from '../../../utils/api.js';
export default {
	data() {
		return {
			busValue: [-1],
			arrValue: 0,
			range: [
				{ value: 0, text: '篮球' },
				{ value: 1, text: '足球' },
				{ value: 2, text: '游泳' }
			],
			options1: [
				{
					text: '删除',
					style: {
						backgroundColor: '#3c9cff'
					}
				}
			],
			categoryList: [],
			busList: [
				{
					businessName: '全部店铺',
					businessId: -1
				}
			],
			disable: false,
			arrLsit: [
				{
					adminId: 28,
					businessId: '',
					businessName: '0',
					categoryDesc: '333',
					categoryName: '无',
					createTime: '2023-03-30 17:30:43',
					icon: 'https://oss.daccf.com/images/1680486769899.jpg?height=720&width=1088&timestamp=1680486770129',
					id: 0,
					orders: 0,
					pgoodCategoryList: [],
					pid: 0,
					plugsId: 143,
					status: 0,
					updateTime: '2023-06-15 17:44:57'
				}
			],
			search: {
				page: 1,
				size: 20
			},
			keyword: '',
			show: false,
			title: '添加分类名称',
			total: 0,
			form: {
				adminId: uni.getStorageSync('userInfo').id,
				userServiceToken: uni.getStorageSync('userInfo').userServiceToken,
				id: '',
				categoryName: '',
				categoryDesc: '',
				icon: '',
				orders: '',
				pid: '0',
				categoryBackgroundImage: '',
				plugsId: 143,
				status: '',
				businessId: 0
			}
		};
	},
	onShow() {
		this.getBusList();
		this.getCategoryList();
		let that = this;
		uni.$once('changeList', function (data) {
			console.log(data, 9966);
			if (data.length > 0) {
				that.form.icon = data[0];
			}
		});
	},
	onReachBottom() {
		if (this.categoryList.length < this.total) {
			this.search.page++;
			this.getCategoryList();
		}
	},
	methods: {
		tapTitle(data) {
			console.log(data, 93654);
			this.updata(data);
		},

		open() {
			this.cancel();
			this.show = true;
			this.title = '添加分类';
		},

		// 获取店铺
		getBusList() {
			let data = {
				adminId: uni.getStorageSync('userInfo').adminId,
				userServiceToken: uni.getStorageSync('userInfo').userServiceToken,
				size: 1000
			};
			getBusinessInfo(data).then((res) => {
				if (res.code == 200) {
					res.body.forEach((item) => {
						this.busList.push(item.jsonViewData);
					});
				}
			});
		},
		change(e) {
			console.log(e, 123);
			if (this.busValue.includes(-1)) {
				this.$nextTick(() => {
					this.busValue = [-1];
				});
				this.form.businessId = '0';
			} else {
				this.form.businessId = this.busValue.toString();
			}
		},
		changeArr(e) {
			console.log(e, 4546);
			if (e.id == 0) {
				this.disable = false;
				this.$nextTick(() => {
					this.busValue = [];
					this.form.pid = e.id;
				});
			} else {
				this.disable = true;
				this.$nextTick(() => {
					this.busValue = e.businessId.split(',');
					this.form.businessId = e.businessId;
					this.form.pid = e.id;
					if (this.form.businessId == 0) {
						this.busValue = [-1];
					}
				});
			}
		},

		changeImage(index) {
			uni.navigateTo({
				url: '/pages/user/annex/annex?source=1'
			});
		},
		delImage(index) {
			let that = this;
			uni.showModal({
				title: '提示',
				content: '您确定要删除此图片吗？',
				cancelText: '取消', // 取消按钮的文字
				confirmText: '确定', // 确认按钮文字
				showCancel: true, // 是否显示取消按钮，默认为 true
				// confirmColor: '#f55850',
				// cancelColor: '#39B54A',
				success: (res) => {
					if (res.confirm) {
						//点击了确定
						this.form.icon = '';
						uni.showToast({
							icon: 'none',
							title: '删除成功'
						});
					} else {
						//点击了取消
					}
				}
			});
		},
		cancel() {
			this.busValue= [-1]
			this.arrValue= 0
			this.form = {
				adminId: uni.getStorageSync('userInfo').id,
				userServiceToken: uni.getStorageSync('userInfo').userServiceToken,
				id: '',
				categoryName: '',
				categoryDesc: '',
				icon: '',
				orders: '',
				categoryBackgroundImage: '',
				pid: '0',
				plugsId: 143,
				status: '',
				businessId: 0
			};
		},
		searchlist() {
			this.getCategoryList();
		},
		getCategoryList() {
			let data = {
				page: this.search.page,
				size: this.search.size,
				adminId: uni.getStorageSync('userInfo').id,
				userServiceToken: uni.getStorageSync('userInfo').userServiceToken,
				id: 141,
				keyword: this.keyword,
				businessId: -1
			};
			searchPlugsGoodCategoryList(data).then((res) => {
				if (res.code == 200) {
					if (this.search.page == 1) {
						this.categoryList = [];
					}
					let arr = [];

					arr = this.categoryList.concat(res.body.list);
					this.categoryList = arr;
					this.categoryList.forEach((item) => {
						item.label = item.categoryName;
						item.businessId = item.businessId.toString();
						item.id = item.id.toString();
						item.value = item.id.toString();
						item.children = item.pgoodCategoryList;
						this.arrLsit.push(item);
						if (item.children.length > 0) {
							item.children.forEach((item1) => {
								item1.label = item1.categoryName;
								item1.businessId = item1.businessId.toString();
								item1.id = item1.id.toString();
								item1.value = item1.id.toString();
								item1.children = item1.pgoodCategoryList;
								this.arrLsit.push(item1);
								if (item1.children.length > 0) {
									item1.children.forEach((item2) => {
										item2.label = item2.categoryName;
										item2.businessId = item2.businessId.toString();
										item2.id = item2.id.toString();
										item2.value = item2.id.toString();
										item2.children = item2.pgoodCategoryList;
										this.arrLsit.push(item2);
										if (item2.children.length > 0) {
											item2.children.forEach((item3) => {
												item3.label = item3.categoryName;
												item3.businessId = item3.businessId.toString();
												item3.id = item3.id.toString();
												item3.value = item3.id.toString();
												item3.children = item3.pgoodCategoryList;
												this.arrLsit.push(item3);
												if (item3.children.length > 0) {
													item3.children.forEach((item4) => {
														item4.label = item4.categoryName;
														item4.businessId = item4.businessId.toString();
														item4.id = item4.id.toString();
														item4.value = item4.id.toString();
														item4.children = item4.pgoodCategoryList;
													});
												}
											});
										}
									});
								}
							});
						}
					});

					this.total = res.body.total;
				}
			});
		},
		del() {
		
		
		uni.showModal({
			title: '提示',
			content: '您确定要删除此分类吗？',
			cancelText: '取消', // 取消按钮的文字
			confirmText: '确定', // 确认按钮文字
			showCancel: true, // 是否显示取消按钮，默认为 true
			// confirmColor: '#f55850',
			// cancelColor: '#39B54A',
			success: (res) => {
				if (res.confirm) {
					//点击了确定
					let data = {
						ids: this.form.id
					};
					delPlugsGoodCategory(data).then((res) => {
						if (res.code == 200) {
							uni.showToast({
								icon: 'none',
								title: '删除成功'
							});
							this.show = false;
							setTimeout(() => {
								this.getCategoryList();
							}, 500);
						}
					});
				} else {
					//点击了取消
				}
			}
		});
		
			
		},
		updata(item) {
			
			let data = {
				id: item.id.toString()
			};
			searchPlugsGoodCategoryById(data).then((res) => {
				if (res.code == 200) {
					this.form = res.body;
					if(this.form.id!=0){
						this.title = '修改分类';
					}
					this.$nextTick(() => {
						this.busValue = this.form.businessId.split(',');
						this.arrValue=this.form.pid
						if (this.form.businessId == 0) {
							this.busValue = [-1];
						}
					});
				}
			});
			this.show = true;
		},
		confirm() {
			if(!this.form.categoryName){
				uni.showModal({
					title: '提示',
					content: '分类名称不能为空',
					success(res) {}
				});
				
				return;
			}else if(!this.form.businessId){
				uni.showModal({
					title: '提示',
					content: '店铺不能为空',
					success(res) {}
				});
				
				return;
			}
			
			if (!this.form.id || this.form.id == '') {
				addPlugsGoodCategory(this.form).then((res) => {
					if (res.code == 200) {
						uni.showToast({
							icon: 'success',
							title: '添加成功'
						});
						this.show = false;
						setTimeout(() => {
							this.getCategoryList();
						}, 500);
					}
				});
			} else {
				updatePlugsGoodCategory(this.form).then((res) => {
					if (res.code == 200) {
						uni.showToast({
							icon: 'success',
							title: '修改成功'
						});
						this.show = false;
						setTimeout(() => {
							this.getCategoryList();
						}, 500);
					}
				});
			}
		}
	}
};
</script>
<style lang="scss">
page {
	background-color: #fff;
}
</style>
<style lang="scss" scoped>
.header {
	display: flex;
	align-items: center;
	padding: 20rpx;
	border-bottom: 1rpx solid #dadbde;
	background-color: #fff;
	.button {
		width: 180rpx;
		height: 60rpx;
		.btn {
			color: #fff;
			height: 60rpx;
			line-height: 60rpx;
			font-size: 26rpx;
			background-color: #6da7ff;
			text-align: center;
		}
	}
}
.list {
	padding: 20rpx;
	padding-top: 0;
	background-color: #fff;
	.title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #f5f5f5;
		.left {
			font-size: 26rpx;
			font-weight: 700;
		}
		.right {
			width: 40rpx;
			height: 40rpx;
			background-color: #c5c8ce;
			border-radius: 30rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
}
.popup-box {
	width: 600rpx;
	height: 800rpx;
	.title {
		padding: 20rpx;
		text-align: center;
		font-weight: 700;
	}
	.right-aside {
		flex: 1;
		overflow: hidden;
		height: 640rpx;
		padding-bottom: 20rpx;
	}
	.box {
		padding: 0 20rpx;
		.box-lable {
			padding-bottom: 20rpx;
			.lable {
				font-size: 32rpx;
				padding-bottom: 20rpx;
			}
		}
	}
}

.footer {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20rpx;

	background-color: #fff;
	width: 100%;
	.left {
		background-color: #016eff;
		width: 600rpx;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 40rpx;
		color: #fff;
	}
}
.u-page {
	padding: 0;
}

.u-demo-block__title {
	padding: 10px 0 2px 15px;
}

.swipe-action {
	&__content {
		padding: 25rpx 0;

		&__text {
			font-size: 15px;
			color: $u-main-color;
			padding-left: 30rpx;
		}
	}
}
</style>
